<template>
	<view>
		<PcNavBar></PcNavBar>

		<view class="classroom-view">
			<view class="classroom-content">
				<view class="classroom-item">
					<image src="/static/about-5.png" class="classroom-image" mode="aspectFill"></image>
				</view>
				<view class="classroom-list">
					<view class="item-view">
						<view class="item-name">
							<view class="name-tag">小剧场</view>
							<view class="name-text">【诺众小剧场】2022不良资产大起底</view>
						</view>
						<view class="time-text">
							<view>2023/03/27 03:30</view>
							<image src="/static/about-4.png" class="time-icon"></image>
						</view>
					</view>
					<view class="item-view">
						<view class="item-name">
							<view class="name-tag">小剧场</view>
							<view class="name-text">【诺众小剧场】2022不良资产大起底</view>
						</view>
						<view class="time-text">
							<view>2023/03/27 03:30</view>
							<image src="/static/about-4.png" class="time-icon"></image>
						</view>
					</view>
					<view class="item-view">
						<view class="item-name">
							<view class="name-tag">小剧场</view>
							<view class="name-text">【诺众小剧场】2022不良资产大起底</view>
						</view>
						<view class="time-text">
							<view>2023/03/27 03:30</view>
							<image src="/static/about-4.png" class="time-icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card-view">
			<view class="classify-list">
				<view class="classify-item classify-active">
					<view class="classify-text">全部分类</view>
				</view>
				<view class="classify-item">
					<view class="classify-text">诺众百科</view>
				</view>
				<view class="classify-item">
					<view class="classify-text">不良资产</view>
				</view>
				<view class="classify-item">
					<view class="classify-text">小剧场</view>
				</view>
			</view>
			<view class="card-content">
				<view class="card-list">
					<view v-for="(item, index) in 20" :key="index" class="card-item">
						<view class="card-image">
							<image src="/static/about-5.png" class="image-css" mode="aspectFill"></image>
							<view class="image-tag">小剧场</view>
						</view>
						<view class="name-text">【海参季说海参】舌尖上的海参</view>
						<view class="time-text">2023/03/27 03:30</view>
					</view>
				</view>
				<view class="column">
					<el-pagination class="el-pagination-css" background layout="prev, pager, next" :total="1000">
					</el-pagination>
				</view>
				<view style="height: 60px;"></view>
			</view>
		</view>

		<Footer></Footer>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	/deep/ .el-pagination-css {
		margin-top: 100px;

		.btn-prev,
		.btn-next {
			width: 30px;
			height: 28px;
			background: white;
			border: none;
		}

		.el-pager {
			.number {
				background: #FFFFFF !important;
				color: #2C1101;

				&:hover {
					color: #2C1101 !important;
				}
			}

			.more {
				@extend .number;
			}

			.el-icon-d-arrow-right,
			.el-icon-d-arrow-left {
				color: #2C1101 !important;
			}

			.active {
				background: #781C18 !important;
				color: #2C1101;
				&:hover {
					color: #FFFFFF !important;
				}
			}
		}
	}

	.classroom-view {
		width: 100%;
		padding: 20px 0;
		background: #EFEFEF;
		@extend .column;

		.classroom-content {
			width: 1200px;
			@extend .row;

			.classroom-item {
				width: 600px;
				height: 340px;

				.classroom-image {
					width: 100%;
					height: 100%;
				}
			}

			.classroom-list {
				width: calc(100% - 600px);
				height: 340px;
				background: white;
				padding: 0 35px;

				.item-view {
					width: 100%;
					height: calc(100% / 3);
					@extend .column;
					align-items: flex-start;

					.item-name {
						width: 100%;
						@extend .row-start;

						.name-tag {
							padding: 3px 6px;
							background: linear-gradient(270deg, #FF7D41 0%, #FF2615 100%);
							border-radius: 2px;
							font-weight: 400;
							font-size: 11px;
							color: #FFFFFF;
						}

						.name-text {
							font-weight: 600;
							font-size: 18px;
							color: #1F0C00;
						}
					}

					.time-text {
						@extend .row-start;
						font-weight: 400;
						font-size: 14px;
						color: #1F0C00;
						margin-top: 10px;

						.time-icon {
							width: 12px;
							height: 12px;
							margin-left: 5px;
						}
					}
				}

				.item-view+.item-view {
					border-top: 1px solid #FBF8F3;
				}
			}
		}

	}

	.card-view {
		width: 100%;
		background: #F6F6F6;
		@extend .column;
		padding-bottom: 60px;


		.classify-list {
			width: 1200px;
			margin: 0 auto;
			@extend .row-start;
			padding-left: 53px;
			padding-top: 32px;
			margin-bottom: 23px;

			.classify-item {
				.classify-text {
					transition: all 0.3s;
					font-weight: 400;
					font-size: 18px;
					color: #1F0C00;
					position: relative;
					z-index: 2;
				}
			}

			.classify-active {
				position: relative;

				.classify-text {
					font-weight: 600;
					font-size: 22px;
					color: #1F0C00;
				}

				&:before {
					content: "";
					width: 12px;
					height: 12px;
					background: #FF8C8C;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
					border-radius: 50%;
					z-index: 1;
				}
			}

			.classify-item+.classify-item {
				margin-left: 40px;
			}
		}

		.card-content {
			width: 1200px;
			// padding: 0 20px;
			padding-right: 25px;
			background: white;

			.card-list {
				width: calc(100% + 5px);
				margin-left: -5px;
				@extend .row-start;
				align-items: flex-start;
				flex-wrap: wrap;
				margin-top: -5px;

				.card-item {
					width: calc(100% / 3 - 30px);
					margin-left: 30px;
					margin-top: 30px;

					.card-image {
						width: 100%;
						height: 226px;
						position: relative;

						.image-css {
							width: 100%;
							height: 100%;
						}

						.image-tag {
							position: absolute;
							right: 10px;
							bottom: 10px;
							padding: 3px 6px;
							background: linear-gradient(270deg, #FF7C41 0%, #FF2716 100%);
							border-radius: 2px;
							font-size: 11px;
							color: #FFFFFF;
						}
					}

					.name-text {
						width: 100%;
						padding: 0 12px;
						margin-top: 19px;
						font-weight: 600;
						font-size: 18px;
						color: #1F0C00;
					}

					.time-text {
						width: 100%;
						padding: 0 12px;
						margin-top: 13px;
						font-weight: 400;
						font-size: 14px;
						color: #2C1101;
					}
				}

			}

		}
	}
</style>